<template>
    <div class="ui-split ui flex column item one" style="background:#FFF;">
        <div class="ui mini top attached menu m-0">
            <span v-if="back === ''" class="header item goback" @click="retreat()"><span><i class="icon chevron left"></i></span></span>
            <span class="header item border-0"><span>{{title}}</span></span>
            <div class="right menu">
                <slot name="toolbar"></slot>
            </div>
        </div>
        <div class="ui flex item one">
            <div ref="cont" class="ui item one flex" style="padding-right:2px">
                <ui-split-cont :left="left">
                    <slot name="left"></slot>
                </ui-split-cont>
                <ui-split-cont>
                    <slot name="right"></slot>
                </ui-split-cont>
            </div>
        </div>
        <router-view/>
    </div>
</template>
<script>
    export default {
        name:'ui-split',
        provide() {
            return {
                isSplit: true
            }
        },
        props:{
            back:String,
            title:String,
            left:String
        },
        mounted() {

            console.warn('你正在使用一个已经废弃的组件!!!')
            console.info('请更换为"split-screen"组件, 使用说明地址: http://203.6.237.211:18080/v-web/#/bui_split-screen')

            const el = this.$refs;
            const dragBarHtml = `<div id="dragBar" class="item" style="width:7px;cursor:e-resize;background:url() center center no-repeat #eee;"></div>`;
            const $leftCont = el.cont.children[0];
            const $allPage = document.body.parentElement;
            //插入分割栏
            $leftCont.insertAdjacentHTML('afterend', dragBarHtml);
            //给分割栏绑定事件
            const that = this, $dragBar = el.cont.children[1];
            $dragBar.onmousedown = function(e) {
                e.preventDefault();
                e.stopPropagation();
                //获取左边容器的左边距离
                let left = that.offset($leftCont).left + 4;
                //拖动后赋值
                $allPage.onmousemove = function(event) {
                    $leftCont.style.width = event.pageX - left + 'px';
                };
            };
            //解除事件
            $allPage.onmouseup = function() {
                $allPage.onmousemove = null;
            }
        },
        methods:{
            retreat() {
                console.warn('退后功能我还没写');
            },
            offset(element) {
                let rawDomNode = element;
                let body = document.documentElement || document.body;
                let scrollX = window.pageXOffset || body.scrollLeft;
                let scrollY = window.pageYOffset || body.scrollTop;
                let clientRect = rawDomNode.getBoundingClientRect();
                let x = clientRect.left + scrollX;
                let y = clientRect.top + scrollY;
                return { left:x, top:y };
            }
        }
    }
</script>


